<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/header.css">
<style>
body{ font-family:"微软雅黑";}/*全局控制*/
.bg{
	max-width: 6.4rem;
	height:auto;
	margin:0 auto!important;
	padding-left:0.1rem;
	border:1px solid #003;
	font-size:0.16rem;	                               
	}
form{ width:100%;}
h2{                                    
	text-align:center;
	margin:0.16rem 0; 
}     
p{margin-top:.20rem;}
p span{
	display:inline-block;  /*将行内元素转换为行内块元素*/
	text-align:right;
	padding-right:0.1rem;                   
}
p input{
	width:2rem;
	height:0.20rem;
	border:1px solid #d4cdba;
    padding:0.08rem; /*设置输入框与输入内容之间拉开一些距离*/
}
.lucky input{
	width:1rem;
	height:0.24rem; 
}
.btn{ padding:0; height:0.5rem; padding-bottom:0.2rem;}
.btn input{  /*设置两个按钮的宽高、边距及边框样式*/
	width:1rem; 
	height:0.25rem;
	line-height:0.25rem;
	background:#FFF;
	padding-bottom:0.3rem;
	margin-top:0.05rem;
	margin-left:20%; 
	border:2px solid #09F;
	border-radius:3px;                      /*设置圆角边框*/
	font-size:0.18rem;
	font-family:"微软雅黑";
	color:#000;
}
/*媒体查询，处理分辨率不同时字体大小的显示*/
@media (min-width: 480px) and (max-width: 640px) {
h2{font-size:0.16rem}
.bg{
	font-size: 0.14rem;
	padding-left:0.1rem;
}
header {
	font-size: 0.14rem;
}
.btn input{font-size:0.16rem;}
}
/*媒体查询，屏幕分辨率小于480px*/
@media (max-width: 480px) {
h2{font-size:0.14rem}
.bg {
	font-size: 0.12rem
}
header {
	font-size: 0.12rem;
}
.btn input{font-size:0.14rem;}
}
</style>
</head>
<body>
<header>
   <nav id="nav">
      <input type="checkbox" id="togglebox" />
    <ul>
      <li><a href="index.html">推荐</a></li>
      <li><a href="cont.html">快讯</a></li>
      <li><a href="movie.html">视频</a></li>
      <li><a href="list.html">服务</a></li>
    </ul>
      <!--汉堡菜单按钮-->
    <label class="menu" for="togglebox"><img src="images/menu.png"/></label>
  </nav>
</header>

<div class="bg">
    <form action="#" method="get" autocomplete="off">
    <h2>信息登记表</h2>
    <p><span>用户名称：</span><input type="text" name="user_name" value="myemail@163.com" disabled readonly />（不能修改，只能查看）</p>
    <p><span>真实姓名：</span><input type="text" name="real_name"  pattern="^[\u4e00-\u9fa5]{0,}$" placeholder="例如：王明" required autofocus style="border:1px solid #d4cdba;"/>（必须填写，只能输入汉字）</p>
    <p><span>真实年龄：</span><input type="number" name="real_lage" value="24" min="15" max="120" required style="border:1px solid #d4cdba;"/>（必须填写）</p>
    <p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-1" required/>（必须填写）</p>
    <p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="123456@126.com" required multiple/>（必须填写）</p>
    <p><span>身份证号：</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$"/>（必须填写，能够以数字、字母x结尾的短身份证号）</p>
    <p><span>手机号码：</span><input type="tel" name="telphone" pattern="^\d{11}$" required/>（必须填写）</p>
    <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http://www.itcast.cn" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"/>（请选择网址）
      <datalist id="urllist">
      <option>http://www.itcast.cn</option>
      <option>http://www.boxuegu.com</option>
      <option>http://www.w3school.com.cn</option>
      </datalist>
    </p>
    <p class="lucky"><span>幸运颜色：</span><input type="color" name="lovecolor" value="#fed000"/>（请选择你喜欢的颜色）</p>
    <p class="btn">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    </p>
    </form>
</div>
</body>

</html>